<!DOCTYPE html>
<html>
<head>
<title>Bootstrap basic Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href='http://fonts.googleapis.com/css?family=Lato:100,400' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-cerulean.css" rel="stylesheet" media="screen">
<link href="custom.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="brand" href="#"><img src="img/sos-img/logo_sos_ortodoncia.png" width="153" height="54" alt="logo"></a>
      <div class="nav-collapse collapse pull-right">
        <p class="navbar-text"> <img src="img/sos-img/login-facebook-header.png" width="102" height="23"> <a href="#" class="navbar-link">Ingresar</a> </p>
        <ul class="nav">
          <li class="linkNavActive"><a href="#">Home</a></li>
          <li><a href="#about">Qui&eacute;nes somos</a></li>
        </ul>
      </div>
      <!--/.nav-collapse --> 
    </div>
  </div>
</div>
<div class="container-fluid"><!--container starts -->
  <div class="row-fluid"><!-- first row starts -->
    <div class="span12" style="padding-top:40px; padding-left:20px;padding-right:20px;"><!-- second column starts -->
      <h1>Temario</h1>
      <p>&nbsp;</p>
      <p class="linkPreguntaTemario"><a href="#">*Pregunta para guiar al usuario</a></p>
      <p>&nbsp; </p>
    </div>
    <div class="row-fluid rowTemario">
      <div class="span12" style="padding-left:20px;padding-right:20px;">
        <div class="titleTemario">
        <div class="h3Container">
          <h3>Tema 1 - Consultas</h3>
          </div>
        </div>
        <div class="span11">
          <div class="span2"><img src="img/sos-img/img_test_temario.jpg" width="141" height="90" alt="test"></div>
          <div class="span10" style="margin-left:0">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
          </div>
        </div>
        <div class="span11 containerTemario">
          <div class="span2 iconsTemario"> <img src="img/sos-img/ico_img.png" width="32" height="26" alt="img"><img src="img/sos-img/ico_video.png" width="30" height="26" alt="video"><img src="img/sos-img/ico_consultas.png" width="24" height="28" alt="consultas"></div>
          <div class="span10 nextTemario"><input type="button" class="nextTemarioBtn"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- first row ends -->
  <div class="row-fluid rowTemario">
      <div class="span12" style="padding-left:20px;padding-right:20px;">
        <div class="titleTemario">
          <div class="h3Container">
          <h3>Tema 2 - Consultas</h3>
          </div>
        </div>
        <div class="span11">
          <div class="span2"><img src="img/sos-img/img_test_temario.jpg" width="141" height="90" alt="test"></div>
          <div class="span10" style="margin-left:0">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
          </div>
        </div>
        <div class="span11 containerTemario">
          <div class="span2 iconsTemario"> <img src="img/sos-img/ico_img.png" width="32" height="26" alt="img"><img src="img/sos-img/ico_video.png" width="30" height="26" alt="video"><img src="img/sos-img/ico_consultas.png" width="24" height="28" alt="consultas"></div>
          <div class="span10 nextTemario"><input type="button" class="nextTemarioBtn"></div>
        </div>
      </div>
    </div>
  <!--second row ends -->
<div class="row-fluid rowTemario">
      <div class="span12" style="padding-left:20px;padding-right:20px;">
        <div class="titleTemario">
          <div class="h3Container">
          <h3>Tema 3 - Consultas</h3>
          </div>
        </div>
        <div class="span11">
          <div class="span2"><img src="img/sos-img/img_test_temario.jpg" width="141" height="90" alt="test"></div>
          <div class="span10" style="margin-left:0">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
          </div>
        </div>
        <div class="span11 containerTemario">
          <div class="span2 iconsTemario"> <img src="img/sos-img/ico_img.png" width="32" height="26" alt="img"><img src="img/sos-img/ico_video.png" width="30" height="26" alt="video"><img src="img/sos-img/ico_consultas.png" width="24" height="28" alt="consultas"></div>
          <div class="span10 nextTemario"><input type="button" class="nextTemarioBtn"></div>
        </div>
      </div>
    </div>
  
  <!--third row ends --> 
  
  <!--sixth row ends --> 
  
</div>
<!--container ends -->
<div class="row-fluid footerStyle">
  <div class="span8">
    <p>Todos los derechos reservados - www.sosortodoncia.com.ar - Córdoba, Argentina</p>
  </div>
  <div class="span4" style="text-align:right; padding-right:10px; padding-top:7px"><img src="img/sos-img/like_icon.png" width="76" height="22"> <img src="img/sos-img/facebook_icon.png" width="24" height="24" alt="facebook"></div>
</div>
  <script src="http://code.jquery.com/jquery.js"></script> 
  <script src="js/bootstrap.min.js"></script>  
</body>
</html>
